<template>
  <div class="table-view">

    <el-table
      border
      header-cell-class-name="table-header"
      :data="data"
      :max-height="maxHeight"
      :cell-style="cellStyle"
      :tree-props="treeProps"
      :row-key="rowKey"
      :default-expand-all="defaultExpandAll"
      :show-summary="showSummary"
      @row-click="rowClick"
      @sort-change="createChange"
      @selection-change="handleSelectionChange"
    >
      <slot />
    </el-table>

  </div>
</template>

<script>
import {
  defineComponent,
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    data: {
      type: Array,
      default: [],
    },
    rowKey: {
      type: String,
      default: '',
    },
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
    treeProps: {
      type: Object,
      default: {},
    },
    isPage: {
      type: Boolean,
      default: false,
    },
    total: {
      type: Number,
      default: 0,
    },
    pageNumber: {
      type: Number,
      default: 10,
    },
    pageSize: {
      type: Number,
      default: 1,
    },
    sortChange: {
      type: Function,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    summaryMethod: {
      type: Function,
      default: () => {},
    },
    cellStyle: {
      type: Function,
      default: (row) => {
        if (row.column.label === '操作') return
        return 'cursor: pointer;'
      },
    },
  },
  setup(props, { emit }) {
    var maxHeight = ref(300)

    watch(
      () => props.visible,
      (newV, oldV) => {
        setTimeout(() => {
          resizeHandler()
        }, 500)
      }
    )

    onBeforeMount(() => {
      window.addEventListener('resize', resizeHandler)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeHandler)
    })

    onMounted(() => {
      setTimeout(() => {
        resizeHandler()
      }, 500)
    })

    const resizeHandler = () => {
      const dom1 = document.getElementsByClassName('main-content')[0]
      const dom = document.getElementsByClassName('list-container')[0]
      let num = 0
      if (dom?.children) {
        for (let i = 0; i < dom.children.length; i++) {
          if (dom.children[i].className !== 'table-view') {
            num += dom.children[i].clientHeight
          }
        }
      }

      const page = props.isPage ? 72 : 0
      maxHeight.value = dom1.clientHeight - num - 40 - page
    }

    const rowClick = (row, column, event) => {
      emit('row-click', row, column, event)
    }

    const getList = () => {
      emit('get-list')
    }

    const createChange = (obj) => {
      emit('sort-change', obj)
    }

    const handleSelectionChange = (val) => {
      emit('selection-change', val)
    }

    return {
      maxHeight,

      rowClick,
      getList,
      createChange,
      handleSelectionChange,
    }
  },
})
</script>

<style scoped>
</style>
